<html>
  <head>
    <style type="text/css" media="all"><!-- @import url("css.css"); --></style>
    <script type="text/javascript" src="classes.js"></script>
    <script type="text/javascript">
    function makeOnChange(plan) {
      return function() { plan.toggleIgnore(); saveServersAndPingBackgroundPage(servers); load(); };
    }
    
    function load() {
      if (document.getElementById("plansTable") != null) {
        document.getElementById("plansDiv").removeChild(document.getElementById("plansTable"));
      }
      getServerDetailsFromLocalStorage();
      var table = document.createElement("table");
      table.setAttribute("id", "plansTable");
      for (var s in servers) {
        var server = servers[s];
        var tr = document.createElement("tr");
        tr.innerHTML = "<td colspan='3'><h3>Server:&nbsp;<a href='" + server.scheme + "://" + server.host + "' target='_blank'>" + server.host + "</a></h3></td>";
        table.appendChild(tr);
        var tr = document.createElement("tr");
        tr.innerHTML = "<tr><th>Plan</th><th>Status</th><th>Ignore?</th></tr>";
        table.appendChild(tr);
        
        for (var p in servers[s].plans) {
          var plan = servers[s].plans[p];
          var tr = document.createElement("tr");
          tr.setAttribute("class", plan.getStatusText());
          var td = document.createElement("td");
          td.innerHTML = "<a href='" + server.scheme + "://" + server.host + "/browse/" + plan.planName + "/latest' target='_blank' class='" + plan.getStatusText() + "'>" + plan.planName + "</a>";
          tr.appendChild(td);
          var td = document.createElement("td");
          td.innerHTML = plan.getStatusText();
          tr.appendChild(td);
          var td = document.createElement("td");
          var checkbox = document.createElement("input");
          checkbox.setAttribute("type", "checkbox");
          if (plan.ignored === PlanStatus.IGNORED) {
            checkbox.setAttribute("checked", "checked");
          }
          checkbox.onchange = makeOnChange(plan);
          td.appendChild(checkbox);
          tr.appendChild(td);
          table.appendChild(tr);
        }
      }
      document.getElementById("plansDiv").appendChild(table);
    }
    </script>
  </head>
  <body onload="load();" style="width: 400px; overflow: visible;">
    <div id="plansDiv" style="width: 100%"></div>
    <div><a href="#" onclick="chrome.extension.getBackgroundPage().update();">Update now</a></div>
  </body>
</html>